<template>
  <view>
    <view class="tips">
      <view
        ><image class="img" src="@/static/images/alert_icon.png" mode="widthFix"></image>
        <ve-icon name="info-circle" color="#2979ff" size="24"></ve-icon> 操作说明：</view
      >
      <view>1、列表展示待付款的所有费项，可选择多个费用合并确认流水</view>
      <view>2、收款费项及付款费项支持合并结算，线上费用及线下费用支 持合并结算</view>
    </view>
    <view class="viewports">
      <settlementDetail v-for="(item, index) in fee" :key="index" :item="item" :choose="true" @click="chooseFee(index)" />
    </view>
    <ve-bottom-box>
      <view class="bottom-button" @click="allChange">
        <image class="all-choose" v-if="allChoose" src="../../../../static/icons/icon-checkbox-select.png" />
        <image class="all-choose" v-else src="../../../../static/icons/icon-checkbox.png"></image>
        <view class="c3 fs28 fw400 all-choose-text">全选</view>
      </view>
      <ve-button type="primary" @click="onConfirm" style="width: 100%">批量结算</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup lang="ts">
  import { inject, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getShortOrdrFeeDetailAPI } from '@/api/order/sOrder'
  import settlementDetail from './components/settlement-detail.vue'

  const fee = ref<any>({})
  const allChoose = ref(false)
  const idList = ref<any>([])
  // 获取订单详情
  const shortOrderDetails = inject('getShortOrderDetail')

  const getDetail = async (id: any) => {
    // 批量结算，在此接口增加confirmFlag = 1参数，返回所有费项无需处理
    getShortOrdrFeeDetailAPI({ orderId: id, confirmFlag: 1 }).then(({ result }) => {
      fee.value = result.map((item: any) => {
        item.choose = false
        item.settlementAmount = item.waitPayAmount
        return item
        // return (item.feeType == 1 || (item.feeType == 2 && shortOrderDetails.value?.orderStatus == 1000)) && [0, 3].includes(item.feeStatus)
      })
    })
  }
  const chooseFee = (i: any) => {
    fee.value.forEach((item: any, index: any) => {
      if (i == index) {
        item.choose = !item.choose
        item.choose ? idList.value.push(item.id) : (idList.value = idList.value.filter((el: any) => el !== item.id))
      }
    })
    allChoose.value = idList.value.length == fee.value.length
  }
  const allChange = () => {
    allChoose.value = !allChoose.value
    idList.value = []
    fee.value.forEach((item: any) => {
      item.choose = allChoose.value
      allChoose.value && idList.value.push(item.id)
    })
  }
  const onConfirm = () => {
    if (idList.value.length == 0) {
      uni.showToast({
        icon: 'none',
        title: '请选择费项',
      })
      return false
    } else {
      uni.navigateTo({
        url: '/pages/order/short-order/detail/settlement?idList=' + JSON.stringify(idList.value) + '&pagefrom=mergeConfirm',
      })
    }
  }
  onLoad((options: any) => {
    options.orderId && getDetail(options.orderId)
  })
</script>

<style lang="scss" scoped>
  page {
    background: #f7f8fa;
  }
  .viewports {
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0 24rpx;
  }
  .all-choose {
    width: 36rpx;
    height: 36rpx;
  }
  .tips {
    width: 100%;
    background: #e8f3ff;
    padding: 18rpx 32rpx;
    color: #1d2129;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 2;
    .img {
      position: absolute;
      top: 28rpx;
      left: 24rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .bottom-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 1;
    .all-choose-text {
      margin: 0 48rpx 0 16rpx;
    }
  }
</style>
